<template>
	<div class="watermark">
		<el-dialog :visible.sync="showWatermark" width="30%" :show-close="false" custom-class="watermark-dialog" :close-on-click-modal="false" :close-on-press-escape="false">
			<div slot="title" class="dialog-title">
				<span class="text">配置水印</span>
				<el-switch v-model="showVideo"> </el-switch>
			</div>
			<div class="icon"></div>
			<div>
				<div v-for="item in watermark" :key="item.id">
					<p> </p>
				</div>
			</div>
			<div class="right">
				<div class="video"> 暂无画面</div>
				<div class="radio">
					<span>请选择水印位置:</span>
					<div style="margin-top:12px">
						<el-radio-group v-model="radio">
							<div>
								<el-radio :label="1" style="margin-bottom:10px">左上方</el-radio>
								<el-radio :label="2">正上方</el-radio>
								<el-radio :label="3">右上方</el-radio>
							</div>
							<div>
								<el-radio :label="4">左下方</el-radio>
								<el-radio :label="5">正下方</el-radio>
								<el-radio :label="6">右下方</el-radio>
							</div>
						</el-radio-group>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelWatermark">取 消</el-button>
				<el-button type="primary" @click="submitWatermark">应 用</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	props: {
		showWatermark: {
			type: Boolean,
			required: true,
			default: () => false
		}
	},
	data() {
		return {
			showVideo: false, //switch开关按钮
			radio: 0, //单选框
			watermark: [] //水印图片
		};
	},
	created() {},
	mounted() {},
	methods: {
		//取消
		cancelWatermark() {
			this.$emit('cancelWatermark');
		},
		//应用
		submitWatermark() {
			this.$emit('submitWatermark');
		}
	}
};
</script>
<style lang="less" scoped>
.watermark {
	.el-dialog {
		.dialog-title {
			.text {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 24px;
			}
		}
		.icon {
			width: 600px;
			height: 200px;
		}
		.right {
			.video {
				width: 260px;
				height: 152px;
				background: #000000;
				border-radius: 6px;
			}
			.radio {
				margin-top: 18px;
			}
		}
	}
	.el-dialog .dialog-title {
		display: flex;
		justify-content: space-between;
	}
	.el-dialog .el-switch {
		width: 38px;
		margin-top: 1px;
	}
}
</style>
<style lang="less">
.watermark-dialog {
	.el-dialog__body {
		border-top: 1px solid #eee;
		display: flex;
	}
}
</style>
